<template>
	<view class="take-money full box relative bg-primary flex-col">
		<!-- <view class="tab-wrap">
			<u-tabs active-color="#3361F0" :bar-height="6" :bold="false" :list="tabList" :is-scroll="false"
				v-model="currentTab" @change="handleTabChange" :bar-style="{bottom:'-4px'}" />
		</view> -->
		<view class="w-wrap">
			<view class="w-inner">
				<mescroll-uni @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback">
					<view class="record-list">
						<view class="earnings-item" v-for="(item,index) in list" :key="index">
							<view class="earnings-header">
								<text class="is-date">{{ item.create_time }}</text>
								<text class="is-price">￥{{ item.tixian_price }}</text>
							</view>
							<view class="detail-list" v-if="item.data && item.data.length">
								<view class="detail-header">
									<text class="header-title">详细记录</text>
									<u-icon class="arrow-active" name="arrow-down" size="28rpx" color="#898989" />
								</view>
								<view class="detail-record" v-for="(record,recordIndex) in item.data">
									<view class="detail-record-item">
										<text>{{ record.content }}</text>
										<text>金额:￥{{ record.old_order_price }}</text>
									</view>
									<view class="detail-record-item">
										<text>水管家:{{ record.user.nickname }}</text>
										<text>{{ record.create_time }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import { request, formatDate } from "@/utils/tool";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				currentTab: 0,
				tabList: [{
					name: '待处理',
				}, {
					name: '已提现'
				}, {
					name: '已取消'
				}]
			}
		},
		methods: {
			async upCallback(ev) {
				const { num, size } = ev
				const resp = await request({
					url: "/beihuotihuoorder/tixianlists",
					method: "GET",
					data: {
						page_no: num,
						page_size: size
					}
				})
				const { lists, count } = resp.data
				if (num === 1) this.list = []
				this.list.push(...lists.map(item => {
					const { create_time } = item
					item.create_time = formatDate(create_time, "YYYY年MM月")
					return item
				}))
				this.mescroll.endBySize(lists.length, count)
			},
			handleTabChange(index) {
				this.currentTab = index
			}
		},
	}
</script>

<style lang="scss" scoped>
	.take-money {
		.record-list {
			padding: 24rpx 18rpx 0;
			box-sizing: border-box;
			position: relative;

			.earnings-item {
				padding: 24rpx 20rpx;
				box-sizing: border-box;
				position: relative;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 24rpx;

				.detail-list {
					margin-top: 10rpx;
					padding: 12rpx 16rpx;
					background: #EEEEEE;
					border-radius: 12rpx 12rpx 12rpx 12rpx;

					.detail-record {
						padding-top: 12rpx;
						border-top: 2rpx solid #E2E2E2;

						.detail-record-item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 24rpx;
							color: #5F5F5F;
							line-height: 44rpx;
						}
					}

					.detail-header {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.arrow-active {
							transform: rotate(180deg);
						}

						.header-title {
							font-size: 24rpx;
							color: #535353;
							line-height: 44rpx;
						}
					}
				}

				.earnings-header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.is-date {
						font-size: 28rpx;
						color: #535353;
						line-height: 44rpx;
					}

					.is-price {
						font-weight: bold;
						font-size: 28rpx;
						color: #FF0000;
						line-height: 44rpx;
					}
				}

				&:last-child {
					margin-bottom: 0;
				}
			}

		}

		.tab-wrap {
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #E7E7E7;
		}
	}
</style>